import React, { memo } from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Row, Col, Card, DatePicker, Tooltip as AntdToopTip } from 'antd';
import numeral from 'numeral';
import moment from 'moment';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import styles from './index.less';

const { RangePicker } = DatePicker;

const AddRedEmp = memo(
  ({
    loading,
    chargData,
    chargMonth,
    handlePanelChange,
    selectMonth,
    chargOrderData,
    chargTotal,
  }) => (
    <Card
      loading={loading}
      title="收费数据统计（只统计服务费，不包含代收代付）"
      extra={
        <RangePicker
          allowClear={false}
          placeholder={['开始月份', '结束月份']}
          format="YYYY-MM"
          value={chargMonth}
          // mode={['month', 'month']}
          picker="month"
          onPanelChange={handlePanelChange}
          disabledDate={current => current && current > moment().endOf('day')}
          // showTime
          onChange={dates => selectMonth(dates)}
        />
      }
    >
      <div className={styles.salesCard}>
        <Row>
          <Col xl={16} lg={12} md={12} sm={24} xs={24}>
            <div>
              <div style={{ position: 'relative', margin: '0 24px' }}>
                <span style={{ fontSize: 16 }}>
                  收费趋势
                  <AntdToopTip title="收费趋势：按月统计整个公司已收费账单的服务费；">
                    <InfoCircleOutlined
                      style={{ marginLeft: 5, color: 'rgba(0,0,0,.45)', fontSize: 14 }}
                    />
                  </AntdToopTip>
                </span>
                <span style={{ position: 'absolute', right: 0, top: 0 }}>
                  <span
                    style={{
                      display: 'inline-block',
                      marginRight: 5,
                      width: 5,
                      height: 5,
                      borderRadius: '50%',
                      backgroundColor: '#1890FF',
                      verticalAlign: 'middle',
                    }}
                  />
                  收费合计&nbsp;&nbsp;
                  {(chargTotal && `${numeral(chargTotal).format('0,0')}元`) || 0}
                </span>
              </div>
              <Chart
                height={400}
                data={chargData}
                scale={{
                  month: {
                    range: [0, 0.95],
                  },
                }}
                forceFit
                style={{ marginTop: 30 }}
              >
                <Legend />
                <Axis name="month" />
                <Axis
                  name="num"
                  label={{
                    formatter: val => (val && `${numeral(val).format('0,0')}元`) || 0,
                  }}
                />
                <Tooltip
                  g2-tooltip={{ backgroundColor: '#595959', color: '#fff' }}
                  crosshairs={{
                    type: 'y',
                  }}
                />
                <Geom
                  type="line"
                  position="month*num"
                  size={2}
                  color="type"
                  shape="smooth"
                  tooltip={[
                    'type*num',
                    (type, num) => ({
                      name: type,
                      value: (num && `${numeral(num).format('0,0')}元`) || 0,
                    }),
                  ]}
                />
                <Geom
                  type="point"
                  position="month*num"
                  size={4}
                  shape="circle"
                  color="type"
                  style={{
                    stroke: '#fff',
                    lineWidth: 1,
                  }}
                  tooltip={[
                    'type*num',
                    (type, num) => ({
                      name: type,
                      value: (num && `${numeral(num).format('0,0')}元`) || 0,
                    }),
                  ]}
                />
              </Chart>
            </div>
          </Col>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <div className={styles.salesRank}>
              <h3 style={{ paddingTop: 16, paddingBottom: 14 }}>收费数据排行</h3>
              <ul className={styles.rankingList}>
                {(chargOrderData.length &&
                  chargOrderData.map((item, i) => (
                    <li key={item.custName}>
                      <span className={`${styles.rankingItemNumber} ${i < 3 ? styles.active : ''}`}>
                        {i + 1}
                      </span>
                      <span className={styles.rankingItemTitle} title={item.suppName}>
                        {item.suppName}
                      </span>
                      <span className={styles.rankingItemValue}>
                        {(item.chrgFee && `${numeral(item.chrgFee).format('0,0')}元`) || 0}
                      </span>
                    </li>
                  ))) || <li style={{ marginLeft: 40 }}>暂无数据</li>}
              </ul>
            </div>
          </Col>
        </Row>
      </div>
    </Card>
  )
);

export default AddRedEmp;